<template>
<div id="app">
  <div class="wapTip" v-if="showWapTip">
    <img class="tiplogo" src="./assets/logo.png">
    <span>本工具仅个人业余制作使用，暂无精力维护手机版本，请使用电脑浏览~</span>
  </div>
  <div class="fixTop">
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <img class="main_logo" src="./assets/logo.png">
      </el-col>
      <el-col :span="18" class="main_title">
        炉石·雷德 金团模板
      </el-col>
    </el-row>
  </div>
  <goldHelper style="margin:0 20px;"  />

</div>
</template>

<script>
import goldHelper from './components/goldHelperWLK.vue'

export default {
  name: 'App',
  components: {
    goldHelper
  },
  data() {
    return {
      showWapTip: false,
    }
  },
  mounted() {
    if (window.screen.availWidth <=800) {
      this.showWapTip = true
    }
  },
  methods: {
  }
}
</script>

<style>
:root {
  --LINKCOLOR: #47B5FF;
}
@font-face {
  font-family: 'iconfont';  /* Project id 2402837 */
  src: url('//at.alicdn.com/t/font_2402837_x2nonlzfj5a.woff2?t=1623053231740') format('woff2'),
       url('//at.alicdn.com/t/font_2402837_x2nonlzfj5a.woff?t=1623053231740') format('woff'),
       url('//at.alicdn.com/t/font_2402837_x2nonlzfj5a.ttf?t=1623053231740') format('truetype');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
#app {background-color: #06283D;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;width: 100%;min-height: 100%;padding-top: 80px;}
a:link,a:hover,a:visited,a:focus{color: var(--LINKCOLOR);text-decoration: none;}

.wapTip{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100;background-color: #06283D;display: flex;align-items: center;justify-content: center;color: #fff;box-sizing: border-box;padding-left: 30px;padding-right: 30px;font-size: 24px;flex-direction: column;}
.tiplogo{width: 80%;display: block;margin-bottom: 20px;}
.wapTip span{display: block;}

.main_logo {height: 50px;display: inline-block;margin-top: 15px;margin-left: 30px;}
.main_title {color: #fff;font-size: 28px;height: 80px;line-height: 80px;font-weight: 600;}
.el-menu{background-color: inherit;}
.el-menu-vertical{border-right: 0;background-color: inherit;}
.el-menu-vertical .el-menu-item-group__title{color: #8bda34}
.el-submenu__title:hover{background-color: inherit;}
.el-menu-vertical .el-menu-item:focus, .el-menu-item:hover{background-color: #4e5967;color: var(--LINKCOLOR) !important}
.grid-content{}
.el-submenu__title i,.el-menu-item i{color: #fff;}
.el-submenu__title i.iconfont,.el-menu-item i.iconfont{margin-right: 3px;}
.fixTop{width: 100%;position: fixed;left: 0;top: 0;z-index: 3;background-color: #06283D;}
.fixLeft{width: 16%;display: inline-block;margin-top: 80px;position: relative;z-index: 2;float: left;}
.fixRight{width: 100%;padding-left: 18%;padding-right: 15px;position: fixed;box-sizing: border-box;top: 80px;left: 0;z-index: 1;}
.el-tabs__item:hover,.el-tabs__item.is-active{color: #47B5FF}
.el-tabs__active-bar{background-color: #47B5FF}
</style>
